<template>
  <div class="customer-detail-page">
    <van-nav-bar
      title="客户详情"
      left-arrow
      @click-left="router.back()"
    />
    
    <van-loading v-if="loading" type="spinner" size="24px" vertical class="loading-container" />
    
    <div class="detail-content" v-else-if="customer">
      <div class="detail-avatar">
        <img :src="customer.image" alt="avatar" />
      </div>
      
      <div class="detail-info">
        <div class="detail-name">{{ customer.buyerName }}</div>
        <div class="detail-phone">{{ formatPhone(customer.contact) }}</div>
        <div class="detail-address" v-if="customer.address">{{ customer.address }}</div>
      </div>
      
      <van-divider />
      
      <div class="detail-stats">
        <div class="stat-item">
          <span class="label">累计消费</span>
          <span class="value">¥{{ customer.totalAmount?.toFixed(2) || '0.00' }}</span>
        </div>
        <div class="stat-item">
          <span class="label">订单次数</span>
          <span class="value">{{ customer.orderCount || 0 }}笔</span>
        </div>
        <div class="stat-item">
          <span class="label">上次消费</span>
          <span class="value">{{ customer.lastVisit || '从未' }}</span>
        </div>
      </div>
      
      <div class="detail-actions">
        <van-button type="primary" block @click="viewCustomerOrders(customer)">查看消费记录</van-button>
        <van-button icon="edit" plain type="primary" block style="margin-top: 10px" @click="handleEdit(customer)">编辑信息</van-button>
      </div>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { getCustomerDetail, type Customer } from '../api/customer'

const router = useRouter()
const route = useRoute()
const customer = ref<Customer | null>(null)
const loading = ref(false)

// 格式化联系方式
const formatPhone = (contact: string) => {
  if (!contact) return '未设置联系方式';
  // 判断是否为手机号格式
  if (/^1\d{10}$/.test(contact)) {
    return contact.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
  }
  return contact;
}

// 查看客户订单
const viewCustomerOrders = (customer: Customer) => {
  const today = new Date()
  const formattedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
  router.push(`/customer-orders/${formattedDate}/${customer.id}`)
}

// 跳转到编辑客户页面
const handleEdit = (customer: Customer) => {
  router.push(`/customer/edit/${customer.id}`)
}

// 加载客户数据
const fetchCustomerData = async (id: string) => {
  loading.value = true
  try {
    customer.value = await getCustomerDetail(id)
  } catch (error) {
    console.error('获取客户详情失败:', error)
    showToast('获取客户详情失败')
    router.back()
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  const id = route.params.id as string
  if (!id) {
    showToast('客户ID无效')
    router.back()
    return
  }
  
  fetchCustomerData(id)
})
</script>

<style lang="scss" scoped>
.customer-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
    
  .loading-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    
  .detail-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    
    .detail-avatar {
      text-align: center;
      margin-bottom: 20px;
      
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
    
    .detail-info {
      text-align: center;
      margin-bottom: 20px;
      
      .detail-name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 8px;
      }
      
      .detail-phone {
        font-size: 16px;
        color: #666;
        margin-bottom: 4px;
      }
      
      .detail-address {
        font-size: 14px;
        color: #999;
      }
    }
    
    .detail-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 30px;
      
      .stat-item {
        text-align: center;
        
        .label {
          font-size: 12px;
          color: #666;
          margin-bottom: 4px;
          display: block;
        }
        
        .value {
          font-size: 16px;
          font-weight: bold;
          color: #323233;
        }
      }
    }
    
    .detail-actions {
      margin-bottom: 30px;
    }
    
    .detail-notes {
      padding: 12px;
      background-color: #fff;
      border-radius: 8px;
      font-size: 14px;
      min-height: 80px;
      color: #666;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }
  }
}
</style> 